import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Tree,Row,Col,Form,Input,Icon,InputNumber,Radio,Text,Button,Divider,Modal,Alert,message } from 'antd'

import { fetch,save,del,add } from '../../redux/catalog.redux'
import './catalog.css'

const TreeNode = Tree.TreeNode
const FormItem = Form.Item
const RadioGroup = Radio.Group
const TextArea = Input.TextArea

@connect(state=>state.catalog, {fetch, save, del, add})
class Catalog extends Component {

    state={
        checkedKeys:null,
        expandedKeys:null,
        selectData:null,
        editShow:false,
        editTitle:null
    }
    componentDidMount() {
        this.props.fetch()
        console.log(this.props.data)
    }

    getTreeNode=(node, data) => {
        return data.filter(v=>v.parent==node.number).map(v=>(
            <TreeNode title={<TreeNodeTitle data={v} editHandle={()=>this.editHandle(v)} addChild={()=>this.addChild(v)} 
            removeHandle={()=>this.removeHandle(v)} />} key={v.number}>
                {this.getTreeNode(v, data)}
            </TreeNode>
        ))
    }
    removeHandle = (data)=>{
        Modal.confirm({
            title:'提示',
            content:'确认删除分类:'+data.name,
            onOk:()=> {
                this.props.del(data.number)
            },
            okText:'确认',
            cancelText:'取消'
        })
    }
    handleSearch=(e)=>{
        const val = e.target.value
        if (val) {
            const data = this.props.data
            const checkedKeys = data.filter(v=>v.name.indexOf(val) > -1).map(v=>v.number)
            const expandedKeys = data.filter(v=>v.name.indexOf(val) > -1).map(v=>this.getParent(data, v))
            let zz = []
            expandedKeys.map(item=>{
                zz=[...zz, ...item.split(',')]
            })
            this.setState({checkedKeys})
            this.setState({expandedKeys:zz})
        } else {
            this.setState({checkedKeys:[]})
            this.setState({expandedKeys:null})
        }
        
    }
    getParent(data, v) {
        let parentObj = null
        if (v.parent) {
            parentObj = data.filter(item=>v.parent==item.number)
        } else {
            return v.number
        }
        if (parentObj) {
            const pparentNums = this.getParent(data, parentObj[0])
            return `${v.number},${pparentNums}`
        } else {
            return v.number
        }
    }
    handleTreeExpand=(expandedKeys)=>{
        this.setState({expandedKeys})
    }
    handleTreeCheck=(checkedKeys)=>{
        this.setState({checkedKeys})
    }
    fieldChange=(name, value)=>{
        this.setState({selectData:{...this.state.selectData, [name]:value}})
    }
    editHandle=(data)=>{
        this.setState({selectData:data, editShow:true, editTitle:'编辑类型'})
    }
    editSubmit=()=> {
        switch (this.state.editTitle) {
            case '编辑类型':
                return this.props.save(this.state.selectData)
            default:
                return this.props.add(this.state.selectData)
        }
    }
    addChild=(data)=>{
        this.setState({selectData:{parent:data.number,status:1}, editShow:true, editTitle:'新增子类型'})
    }
    addParent=()=>{
        this.setState({selectData:{parent:'',status:1}, editShow:true, editTitle:'新增一级类型'})
    }
    DragEnterHandle=(info)=>{
        console.log('dragenter:')
    }
    DropHandle=(info)=>{
        const dropKey = info.node.props.eventKey;
        const dragKey = info.dragNode.props.eventKey;
        let drag = this.props.data.find(v=>v.number==dragKey)
        drag['parent'] = dropKey
        this.props.save(drag)
    }

    render() {
        const data = this.props.data
        const expands = data.filter(v=>v.parent=='').map(v=>v.number)
        const expandedKeys = this.state.expandedKeys ? this.state.expandedKeys : data.map(v=>v.parent)
        return (
            <div style={{marginRight:'20px'}}>
                <Row gutter={24}>
                    <Col span={14}>
                        <Input.Search placeholder="搜索" onChange={this.handleSearch} />
                    </Col>
                    <Col span={2}>
                        <Button type="primary" onClick={this.addParent}>新增一级分类</Button>
                    </Col>
                    <Col span={16}>
                        <Tree
                            draggable={true}
                            checkable
                            showLine={true}
                            checkedKeys={this.state.checkedKeys}
                            expandedKeys={expandedKeys}
                            onCheck={this.handleTreeCheck}
                            onExpand={this.handleTreeExpand}
                            onDragEnter={this.DragEnterHandle}
                            onDrop={this.DropHandle}
                        >
                            {this.getTreeNode({number:''}, data)}
                        </Tree>
                    </Col>
                </Row>
                <Modal
                    title={this.state.editTitle}
                    visible={this.state.editShow} 
                    onOk={this.editSubmit}
                    onCancel={()=>this.setState({editShow: false})}
                    confirmLoading={this.props.saveing}
                >
                    {this.state.selectData && <Form layout="horizontal">
                        <FormItem label="分类名称" labelCol={{ span: 6 }} wrapperCol={{ span: 9 }}>
                            <Input value={this.state.selectData.name} onChange={(e)=>this.fieldChange('name', e.target.value)} />
                        </FormItem>
                        <FormItem label="第二语言" labelCol={{ span: 6 }} wrapperCol={{ span: 9 }}>
                            <Input value={this.state.selectData.blanguage} onChange={(e)=>this.fieldChange('blanguage', e.target.value)} />
                        </FormItem>
                        <FormItem label="分类编码" labelCol={{ span: 6 }} wrapperCol={{ span: 9 }}>
                            <Input value={this.state.selectData.number} onChange={(e)=>this.fieldChange('number', e.target.value)} />
                        </FormItem>
                        <FormItem label="排序" labelCol={{ span: 6 }} wrapperCol={{ span: 8 }}>
                            <InputNumber defaultValue={this.state.selectData.sort} min={1} max={1000} onChange={(value)=>this.fieldChange('sort', value)} />
                        </FormItem>
                        <FormItem label="使用状态" labelCol={{ span: 6 }} wrapperCol={{ span: 8 }}>
                            <RadioGroup value={Number(this.state.selectData.status)} onChange={(e)=>this.fieldChange('status', e.target.value)}>
                                <Radio value={1}>使用中</Radio>
                                <Radio value={2}>停用</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="备注" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
                            <TextArea rows={4} value={this.state.selectData.memo} onChange={(e)=>this.fieldChange('memo', e.target.value)} />
                        </FormItem>
                    </Form>}
                </Modal>
            </div>
        )
    }
}

class TreeNodeTitle extends Component{
    state = {
        showEdit:false
    }
    render() {
        return (
            <div onMouseEnter={()=>{this.setState({'showEdit':true})}} onMouseLeave={()=>{this.setState({'showEdit':false})}}>
                <Row>
                    <Col span={4}>{this.props.data.name}</Col>
                    {this.state.showEdit && <Col span={20} style={{textAlign:'right'}}>
                        <a href="javascript:void();" onClick={this.props.editHandle} style={{marginRight:20}}>编辑</a>
                        <a href="javascript:void();" onClick={this.props.addChild} style={{marginRight:20}}>新增下级分类</a>
                        <a href="javascript:void();" onClick={this.props.removeHandle} style={{marginRight:20}}>删除</a>
                    </Col>}
                </Row>
            </div>
        )
    }
}

export default Catalog